// 引入axios
/* eslint-disable-next-line */
// import axios from 'axios'  使用 this.$axios  替换 axios

export default {
  data () {
    return {
      usersList: [
        {
          username: '王小虎',
          email: 'xxxx.com',
          mobile: '15221176543'
        }
      ],
      // 总个数
      total: 0,
      // 当前页
      pagenum: 1,
      // 查询内容
      input5: '',
      // // 开关状态
      // state: true
      // 显示添加用户对话框
      dialogAddUserVisible: false,
      // 添加用户对象
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      rules: {
        username: [
          // 如果不写内容会 触发
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 如果格式不正确会触发
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          // 如果不写内容会 触发
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 如果格式不正确会触发
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          // 如果格式不正确会触发
          {
            pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
            message: '邮箱格式不正确',
            trigger: 'blur'
          }
        ],
        mobile: [
          // 如果格式不正确会触发
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      },
      // 显示编辑用户对话框
      dialogEditUserVisible: false,
      // 编辑用户表单对象
      editUserForm: {
        username: 'XXX',
        email: '',
        mobile: ''
      },
      // 显示分配角色对话框
      dialogAssignRoleVisible: false,
      // 分配角色对象
      assignRoleForm: {
        username: '123',
        id: 0,
        rid: ''
      },
      // 角色列表
      roleList: []
    }
  },
  // 页面进来自动调用钩子函数 created
  created () {
    // 获取路由对象里的参数 page 3
    let page = this.$route.params.page

    this.loadUsersList(page)
    this.loadRoleList()
  },
  watch: {
    $route (to) {
      // console.log(to.params.page)
      this.loadUsersList(to.params.page, this.input5)
    }
  },
  methods: {
    /**
     * 加载用户列表数据
     */
    async loadUsersList (pagenum = 1, query = '') {
      // let res = await axios.get('http://localhost:8888/api/private/v1/users', {
      // let res = await this.$axios.get('users', {
      //   params: {
      //     query,
      //     pagenum,
      //     pagesize: 2
      //   },
      //   headers: {
      //     Authorization: localStorage.getItem('token')
      //   }
      // })
      let res = await this.$axios.get('users', {
        params: {
          query,
          pagenum,
          pagesize: 2
        }
      })
      console.log(res)
      // 数组数据
      this.usersList = res.data.data.users
      // 总个数
      this.total = res.data.data.total
      // 当前页
      this.pagenum = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query: '',
      //       pagenum: 1,
      //       pagesize: 6
      //     },
      // headers: {
      //   Authorization: localStorage.getItem('token')
      // }
      //   })
      //   .then(res => {
      //     console.log(res.data.data.users)
      //     this.usersList = res.data.data.users
      //   })
    },
    /**
     * 点击页面
     */
    pageChanged (curPage) {
      console.log(curPage)
      // 有个坑
      // 假如  input5 =t
      // 获取 t 的当前页的数据

      // 编程式导航
      this.$router.push('/users/' + curPage)

      // this.loadUsersList(curPage, this.input5)
    },
    /**
     * 查询内容
     */
    startQuery () {
      // console.log(this.input5)
      // 假如  input5 =t
      // 获取 t 的第一页的内容
      this.loadUsersList(1, this.input5)
    },
    /**
     * 删除用户
     */
    async delUser (id) {
      try {
        await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        // 删除用户
        let res = await this.$axios.delete(`users/${id}`)

        console.log(res)

        if (res.data.meta.status === 200) {
          // 重新刷新列表
          this.loadUsersList(1)

          // 提示删除成功
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
      } catch (error) {
        this.$message({
          message: '取消删除用户',
          type: 'info',
          duration: 800
        })
      }
    },
    /**
     * 状态改变
     */
    async stateChanged (row) {
      console.log(row)
      // const { id, mg_state: mgState } = row
      let id = row.id
      let mgState = row.mg_state

      // console.log('改变了')  users/:uId/state/:type
      let res = await this.$axios.put(`users/${id}/state/${mgState}`)
      console.log(res)

      // 刷新列表
      this.loadUsersList(1)

      // 提示修改状态成功
      this.$message({
        message: '修改状态成功',
        type: 'success'
      })
    },
    /**
     * 显示添加用户对话框
     */
    showAddUserDialog () {
      this.dialogAddUserVisible = true
    },
    /**
     * 添加用户
     */
    async addUser () {
      let res = await this.$axios.post('users', this.addUserForm)
      console.log(res)
      // 添加成功返回的是 201 created
      if (res.data.meta.status === 201) {
        // 隐藏对话框
        this.dialogAddUserVisible = false

        // 刷新页面
        this.loadUsersList(1)

        // 提示
        this.$message({
          message: '添加用户成功',
          type: 'success'
        })
      }
    },
    /**
     * 显示编辑用户对话框
     */
    showEditUserDialog (row) {
      console.log(row)
      const { username, email, mobile, id } = row

      this.editUserForm.username = username
      this.editUserForm.email = email
      this.editUserForm.mobile = mobile
      this.editUserForm.id = id

      this.dialogEditUserVisible = true
    },
    /**
     * 编辑用户信息
     */
    async editUser () {
      const { id, email, mobile } = this.editUserForm
      let res = await this.$axios.put(`users/${id}`, {
        email,
        mobile
      })
      console.log(res)
      if (res.data.meta.status === 200) {
        // 隐藏对话框
        this.dialogEditUserVisible = false
        // 刷新页面
        this.loadUsersList(this.pagenum)
        // 提示修改/更新成功
        this.$message({
          message: res.data.meta.msg,
          type: 'success'
        })
      }
    },
    /**
     * 展示分配角色对话框
     */
    async showAssignRoleDialog (row) {
      // 拿到 id rid username  => assignRoleForm

      const { id, username } = row
      // 1. 把id 和 username 赋值 assignRoleForm
      this.assignRoleForm.id = id
      this.assignRoleForm.username = username

      // 2. 就缺一个 rid ????  原来人家已经提供了一个接口
      // 根据id 可以获取 rid
      let res = await this.$axios.get(`users/${id}`)
      console.log(res)
      // rid = -1 ,选择器不识别的
      // 当 -1 ,把rid 改为 ""  , 选择器如果发现了空字符串,认为是没有选择角色的
      this.assignRoleForm.rid =
        res.data.data.rid === -1 ? '' : res.data.data.rid

      this.dialogAssignRoleVisible = true
    },
    /**
     * 获取所有的角色
     */
    async loadRoleList () {
      let res = await this.$axios.get('roles')
      console.log(res)
      this.roleList = res.data.data
    },
    /**
     * 分配 角色
     */
    async assignRole () {
      // 1. 从对象里获取我们需要的参数
      const { id, rid } = this.assignRoleForm

      let res = await this.$axios.put(`users/${id}/role`, {
        rid
      })
      // console.log(res)

      // 关闭对话框
      this.dialogAssignRoleVisible = false

      // 刷新数据
      this.loadUsersList(this.pagenum)

      // 提示更新成功
      this.$message({
        message: res.data.meta.msg,
        type: 'success'
      })
    },
    /**
     * 对话框关闭时会调用
     */
    dialogClosed () {
      console.log('对话框关闭了 ')
      // 表单重置
      // 表单元素.重置()
      // prop
      this.$refs.addUserForm.resetFields()
    }
  }
}
